<style lang="scss">
@import "./login.scss";
</style>

<template>
  <div
    id="large-header"
    class="login"
    @keydown.enter="handleSubmit"
  >
    <!-- <img src="@/assets/images/login-1-bg.jpg"> -->
    <div class="login-con">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <!-- <span>Current tenant: Not selected</span> -->
          <span>通用管理平台</span>
        </div>
        <el-form
          ref="loginForm"
          :model="form"
          status-icon
          :rules="rules"
          class="demo-ruleForm"
          size="medium"
        >
          <el-form-item prop="userNameOrEmailAddress">
            <el-input v-model.number="form.userNameOrEmailAddress">
              <template slot="prepend"><i class="fa fa-user" /></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              auto-complete="off"
            >
              <template slot="prepend"><i class="fa fa-lock" /></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form.rememberClient">RememberMe</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="width:100%"
              @click="handleSubmit"
            >LogIn</el-button>
          </el-form-item>
        </el-form>
        <p class="login-tip">{{ 'PleaseEnterLoginInformation' }}</p>
      </el-card>
    </div>
    <!-- <Modal
         :title="'ChangeTenant'|l"
         v-model="modalShow"
         @on-ok="changeTenant"
        >
             <Input :placeholder="'TenancyName' | l" v-model="changedTenancyName"></Input>
             <p>{{'LeaveEmptyToSwitchToHost' | l}}</p>
             <div slot="footer">
                <Button @click="modalShow=false">{{'Cancel'|l}}</Button>
                <Button @click="changeTenant" type="primary">{{'Save'|l}}</Button>
             </div>
        </Modal> -->
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  data() {
    return {
      rules: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        userNameOrEmailAddress: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      },
      languages: [],
      currentLanguage: {},
      isMultiTenancyEnabled: abp.multiTenancy.isEnabled,
      changedTenancyName: '',
      modalShow: false,
      form: {
        userNameOrEmailAddress: '',
        password: '',
        rememberClient: false
      }
    }
  },
  computed: {
    tenant() {
      return this.$store.state.session.tenant
    }
  },
  created() {
    this.languages = abp.localization.languages.filter(val => {
      return !val.isDisabled
    })
    this.currentLanguage = abp.localization.currentLanguage
    this.isMultiTenancyEnabled = abp.multiTenancy.isEnabled
  },
  methods: {
    changeLanguage(languageName) {
      abp.utils.setCookieValue(
        'Abp.Localization.CultureName',
        languageName,
        new Date(new Date().getTime() + 5 * 365 * 86400000), // 5 year
        abp.appPath
      )
      location.reload()
    },
    showChangeModal() {
      this.modalShow = true
    },
    async changeTenant() {
      if (!this.changedTenancyName) {
        abp.multiTenancy.setTenantIdCookie(undefined)
        this.modalShow = false
        location.reload()
        return
      } else {
        const tenant = await this.$store.dispatch({
          type: 'account/isTenantAvailable',
          data: { tenancyName: this.changedTenancyName }
        })
        switch (tenant.state) {
          case 1:
            abp.multiTenancy.setTenantIdCookie(tenant.tenantId)
            location.reload()
            return
          case 2:
            var message = this.L('TenantIsNotActive', this.changedTenancyName)
            this.$Modal.error({
              title: '',
              content: message
            })
            break
          case 3:
            var message2 = this.L(
              'ThereIsNoTenantDefinedWithName{0}',
              this.changedTenancyName
            )
            this.$Modal.error({
              title: '',
              content: message2
            })
            break
        }

        this.modalShow = false
        this.modalShow = true
      }
    },
    async handleSubmit() {
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          var loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          const self = this

          await this.$store
            .dispatch({
              type: 'user/login',
              data: self.form
            })
            .then(
              response => {
                Cookies.set(
                  'userNameOrEmailAddress',
                  self.form.userNameOrEmailAddress
                )
                location.reload()
              },
              error => {
                loading.close()
                this.$Modal.error({
                  title: '',
                  content: error
                })
                console.log(error)
              }
            )
        }
      })
    }
  }
}
</script>

<style>
.language-ul {
  text-align: center;
}
.language-ul li {
  display: inline;
  margin: 2px;
}
.famfamfam-flags {
  display: inline-block;
}
</style>
